<template>
  <div class="wrapper">
    <!--  导航栏  -->
    <Header active="message" @getUser="getUser"/>
    <!--内容-->
    <div style="margin-top:30px;">
      <el-row>
        <el-col :offset="4" :span="8">
          <el-tag style="float:left;font-size: 16px;">共{{ messageList.length }}条对话</el-tag>
        </el-col>
        <el-col :span="8">
          <el-button-group style="float: right;">
            <el-button style="float:right;" type="danger" size="mini"
                       @click="deleteConversation(messageList[0].message.conversationId)">删除
            </el-button>
          </el-button-group>
        </el-col>
      </el-row>
      <el-row style="margin-top:10px;">
        <el-col :offset="4" :span="16" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 10px">
          <el-row type="flex" justify="left" align="middle" v-for="(data,index) in messageList" :key="index">
            <el-col>
              <el-row>
                <el-col :span="2" style="padding-top: 0px;">
                  <!-- 进入用户主页 -->
                  <a href="#">
                    <el-avatar alt="用户头像" :src="data.from.headerUrl" fit="fill"></el-avatar>
                  </a>
                </el-col>
                <el-col :span="22">
                  <el-row>
                    <el-col :span="8">
                      <span style="color: teal;float: left;">{{ data.from.username }}
                        <span style="font-size: 10px;color: darkgray">{{ data.message.createTime }}</span>
                      </span>
                    </el-col>
                    <el-col :offset="15" :span="1">
                      <el-tag size="mini" style="float:right;cursor:pointer;"
                              @click="reply((pageNum-1) * pageSize + index + 1)" title="回复">
                        {{ (pageNum - 1) * pageSize + index + 1 }}#
                      </el-tag>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="23">
                      <div style="font-size: 20px;text-align: left;">{{ data.message.content }}</div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <el-row style="line-height: 1px;">
                <el-col>
                  <hr style="opacity: 0.3;">
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-pagination
          style="margin-top:10px;"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

      <!--  右下角按钮区域  -->
      <el-button-group style="position: fixed;right:7%;bottom:190px;z-index: 999;">
        <a>
          <el-button type="primary" icon="el-icon-chat-dot-round" circle title="我要回复" @click="toTop"></el-button>
        </a>
      </el-button-group>

      <!--   回复区   -->
      <div id="message">
        <el-row>
          <el-col :offset="4" :span="16">
            <el-input type="textarea" :rows="5" v-model="content"></el-input>
            <el-button style="float:right;" @click="submitMessage" type="primary">发布</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
import Header from "@/views/Header";
import Footer from "@/views/Footer";

export default {
  name: "MessageDerail",
  components: {Footer, Header},
  data() {
    return {
      messageList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      message_list_url: '/community/message/messageList',
      message_add_url: '/community/message/reply',
      conversation_delete_url:'/community/message/conversation',
      user: null,
      content: '',
    }
  },
  mounted() {
    this.getMessageList();
  },
  methods: {
    toTop(){
      document.querySelector('#message').scrollIntoView({behavior: "smooth"});
    },
    deleteConversation(conversationId) {
      this.axios.delete(this.conversation_delete_url + '/' + conversationId).then((response) => {
        console.log(response);
        this.$message.success({
          message:'删除成功!',
          duration:2000,
          onClose:()=>{
            this.$router.go(-1);
          }
        });
      }).catch((error) => {
        console.log(error);
        this.$message.error('删除失败!');
      });
    },
    reply(index) {
      this.content = 'to ' + index + '#: ';
    },
    getUser(user) {
      console.log('getUser:', user);
      this.user = user;
    },
    getMessageList() {
      this.axios.get(this.message_list_url,
          {
            params: {pageSize: this.pageSize, pageNum: this.pageNum, conversationId: this.$route.query.conversationId}
          }).then((response) => {
        console.log(response);
        this.messageList = response.data.data;
        this.total = response.data.total;
      }).catch((error) => {
        console.log(error);
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getMessageList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getMessageList();
    },
    submitMessage() {
      this.axios.post(this.message_add_url,
          {content: this.content, conversationId: this.$route.query.conversationId}
      ).then((response) => {
        console.log(response);
        if (response.data.code === '00000') {
          this.$message.success('回复成功!');
          this.getMessageList();
        } else {
          this.$message.error(response.data.message);
        }
      }).catch((error) => {
        console.log(error);
        this.$message.error(error);
      });
      this.content = '';
    }
  }
}
</script>

<style scoped>
.list-unstyled {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}
</style>
